<template>
  <div class="detail-wrap">
    <common-back :content="title"></common-back>
    <common-scroll class="scroll"
                   ref="scroll">
      <div class="scroll-content">
        <common-address></common-address>
        <div class="title">代品卷内容</div>
        <common-product></common-product>
        <common-product></common-product>
        <common-product></common-product>
        <common-product></common-product>
      </div>
      <common-button :content="content"></common-button>
    </common-scroll>

  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonScroll from 'common/scroll/scroll'
import CommonButton from 'common/button/button'
import CommonAddress from 'common/addressInfo/info'
import CommonProduct from 'common/productList/list'
export default {
  name: 'ticketDetail',
  components: {
    CommonBack,
    CommonScroll,
    CommonButton,
    CommonAddress,
    CommonProduct
  },
  data () {
    return {
      title: '代品卷详情',
      content: '确认使用'
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.detail-wrap
  initPosition()
  background-color $space

  .scroll
    top 88px
    padding()
    bottom 98px

    .scroll-content
      padding-bottom 10px
      padding-top 20px
      box-sizing border-box

    .title
      font-size $address
      line-height 68px
      font-weight 500
      color $footer_bgc
</style>
